<template>
	<view class="content">

		<view class="add">

			<view class="s1">STEP 4/4</view>
			<view class="title">分享海报</view>

			<view class="s2">
				<image v-if="share_back_image" @click="sendImage()" :src="share_back_image" mode="aspectFill"></image>
				<view v-else @click="sendImage()" class="c1">
					<view>添加</view>
					<view style="margin-bottom:50rpx;">分享背景图</view>
				</view>
				<view class="qrcode">二维码保护区</view>
			</view>

			<view class="s3">(推荐宽高比3:4， 文件大小不超过6M)</view>
		</view>

		<view class="but">
			<view style="display: flex;">
				<view class="s1" @click="onBack()">
					<image src="@/static/icon/left.png"></image>
					<text>上一步</text>
				</view>
				<view @click="save" class="save">保存</view>
			</view>

			<view class="s2" @click="onSend()">
				<text>完 成</text>
				<image src="@/static/icon/right.png"></image>
			</view>
		</view>

		<u-toast ref="uToast"></u-toast>
		<u-overlay :show="show" @click="show = false">
			<view class="modal">
				<view class="box" @click.stop>
					<view class="title">
						是否需要为你创建的内容进行保存
						避免下次进入重新创建
					</view>
					<view class="btn">
						<view class="out" @click="handleSave(0)">
							直接退出
						</view>
						<view class="in" @click="handleSave(1)">
							保存
						</view>
					</view>
				</view>
			</view>
		</u-overlay>
	</view>
</template>

<script>
	import conf from '@/common/config.js';
	export default {
		props: {
			addForm: {
				type: Object,
				default: () => {
					return {}
				}
			},
			editId: {
				type: [Number, String]
			}
		},
		data() {
			return {
				show: false,
				id: 0,
				temp_id: 0,
				share_back_image: '',
				row: {
					share_back_image: ''
				}
			};
		},
		mounted() {
			if (this.addForm.share_back_image) {
				this.share_back_image = conf.preview_url + this.addForm.share_back_image;
				this.row.share_back_image = this.addForm.share_back_image;
			}
			// this.getInfo();
		},
		methods: {
			save() {
				console.log(this.addForm);
				this.show = true
			},
			handleSave(type) {
				if (type) {
					const params = this.addForm || {}
					
					this.$API.saveDraft({
						title: params.title,
						start_time: params.start_time,
						end_time: params.end_time,
						phone: params.phone,
						address: params.address,
						images: params.images,
						share_image: params.share_image,
						share_title: params.share_title,
						share_back_image: this.row.share_back_image,
						musicfile: params.musicfile,
						in_set: params.in_set,
						money: params.money,
						templateid: params.templateid,
						content_node: params.content_node,
						template_custom_image: params.template_custom_image
					}, +this.editId).then(res => {
						this.show = false
						uni.showModal({
							title: '提示',
							content: '恭喜您保存成功！',
							showCancel: false,
							success: () => {
								// this.$store.commit('$uStore', {
								// 	name: 'vuex_tempForm',
								// 	value: {}
								// })
								uni.redirectTo({
									url: '/pages/activity/index'
								})
							}
						})

					})
				} else {
					uni.navigateBack()
				}
			},
			getInfo() {
				this.$API.getActivity({
					id: this.id
				}).then(res => {
					this.row.share_back_image = res.data.share_back_image;
					if (res.data.share_back_image) {
						this.share_back_image = conf.preview_url + res.data.share_back_image;
					}
				})
			},
			sendImage() {
				let that = this;
				let host_url = conf.url_config + '/api/common/upload';
				uni.chooseImage({
					count: 1,
					success: (chooseImageRes) => {
						const file = chooseImageRes.tempFiles[0];
						const MAX_SIZE = 1024 * 1024 * 6;
						if (file.size > MAX_SIZE) {
							this.$refs.uToast.show({
								type: 'error',
								message: "背景图不能超过6M",
							});
							return false;
						}

						console.log('tempFilePaths', file)
						const tempFilePaths = chooseImageRes.tempFilePaths;
						uni.uploadFile({
							url: host_url, //仅为示例，非真实的接口地址
							filePath: tempFilePaths[0],
							name: 'file',
							formData: {
								width: '566',
								height: '710'
							},
							header: {
								Token: this.vuex_token
							},
							success: (uploadFileRes) => {
								let data = JSON.parse(uploadFileRes.data);
								console.log('data', data)
								that.share_back_image = data.data.fullurl;
								that.row.share_back_image = data.data.url;
							}
						});
					}
				});
			},
			onBack() {
				this.$emit('onBack')
				// uni.redirectTo({
				// 	url: '/pages/activity/add_3?temp_id=' + this.temp_id + '&id=' + this.id
				// })
			},
			onSend() {
				console.log(this.addForm);
				if (!this.share_back_image) return this.$u.toast('请上传分享背景图')
				let that = this
				let params = this.addForm
				params.id = this.id
				this.$API.saveActivity({
					title: params.title,
					start_time: params.start_time,
					end_time: params.end_time,
					phone: params.phone,
					address: params.address,
					images: params.images,
					share_image: params.share_image,
					share_title: params.share_title,
					// content_images: params.content_images,
					share_back_image: that.row.share_back_image,
					musicfile: params.musicfile,
					in_set: params.in_set,
					money: params.money,
					templateid: params.templateid,
					content_node: params.content_node,
					template_custom_image: params.template_custom_image
				}, +this.editId).then(res => {
					uni.showModal({
						title: '提示',
						content: '恭喜您保存成功！',
						showCancel: false,
						success: () => {
							// this.$store.commit('$uStore', {
							// 	name: 'vuex_tempForm',
							// 	value: {}
							// })
							uni.redirectTo({
								url: '/pages/activity/index'
							})
						}
					})
				});
			}
		}
	}
</script>

<style lang="scss">
	.content {
		width: 670rpx;
		margin: 0 auto;
	}

	.add {
		width: 566rpx;
		padding: 52rpx;
		background-color: #fff;
		border-radius: 48rpx;
		margin-top: 52rpx;

		.s1 {
			width: 100%;
			height: 34rpx;
			font-size: 28rpx;
			font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
			font-weight: 600;
			color: #7677EB;
			line-height: 34rpx;
			text-align: center;
		}

		.title {
			width: 100%;
			height: 52rpx;
			font-size: 36rpx;
			font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
			font-weight: 600;
			color: #110202;
			line-height: 52rpx;
			text-align: center;
			margin-top: 16rpx;
		}

		.s2 {
			position: relative;
			margin-top: 56rpx;
			width: 566rpx;
			height: 710rpx;

			image {
				position: absolute;
				width: 566rpx;
				height: 710rpx;
				border-radius: 16rpx;
			}

			.c1 {
				position: absolute;
				width: 566rpx;
				height: 710rpx;
				inset: 0;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				background-color: #E6EDF5;
				border-radius: 16rpx;
				font-size: 50rpx;
				color: #BFCEDF;
			}

			.qrcode {
				width: 90rpx;
				height: 72rpx;
				background: #C0CBD8;
				position: absolute;
				right: 24rpx;
				bottom: 24rpx;
				display: flex;
				text-align: center;
				border-radius: 16rpx;
				padding: 52rpx 43rpx;
				font-size: 30rpx;
				font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 36rpx;
			}
		}

		.s3 {
			width: 100%;
			height: 36rpx;
			font-size: 24rpx;
			font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
			font-weight: 400;
			color: #9DA4B0;
			line-height: 36rpx;
			text-align: center;
			margin-top: 56rpx;
		}
	}

	.but {
		@include flex;
		justify-content: space-between;
		margin-top: 60rpx;
		margin-bottom: 60rpx;

		.save {
			width: 176rpx;
			height: 92rpx;
			box-shadow: 0rpx 12rpx 116rpx 0rpx rgba(196, 203, 214, 0.1036);
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			border: 2rpx solid #7677EB;
			font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
			font-weight: 400;
			font-size: 30rpx;
			color: #7677EB;
			text-align: center;
			line-height: 92rpx;
		}

		.s1 {
			width: 176rpx;
			height: 96rpx;
			@include flex;
			justify-content: center;
			align-items: center;
			padding-right: 10rpx;

			text {
				font-size: 30rpx;
				font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
				font-weight: 400;
				color: #7677EB;
				line-height: 96rpx;
			}

			image {
				width: 48rpx;
				height: 48rpx;
				margin-right: 28rpx;
			}
		}

		.s2 {
			width: 290rpx;
			height: 96rpx;
			background: #7677EB;
			box-shadow: 0 12rpx 24rpx 0 rgba(63, 140, 255, 0.2637);
			border-radius: 28rpx;
			@include flex;
			justify-content: center;
			align-items: center;

			text {
				font-size: 30rpx;
				font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 96rpx;
			}

			image {
				width: 48rpx;
				height: 48rpx;
				margin-left: 28rpx;
			}
		}
	}

	.modal {

		display: flex;
		height: 100%;
		align-items: center;
		justify-content: center;
		padding: 0 40rpx;

		.box {
			width: 622rpx;
			height: 432rpx;
			background: #FFFFFF;
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			padding: 0 40rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.title {
				font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
				font-weight: 400;
				font-size: 32rpx;
				color: #000000;
				text-align: center;
				margin-top: 70rpx;
				padding: 0 30rpx;
			}

			.btn {
				margin-bottom: 70rpx;
				display: flex;
				justify-content: space-between;

				.out {
					width: 240rpx;
					height: 96rpx;
					box-shadow: 0rpx 12rpx 24rpx 0rpx rgba(63, 140, 255, 0.2637);
					border-radius: 28rpx 28rpx 28rpx 28rpx;
					border: 2rpx solid #7677EB;
					font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
					font-weight: 400;
					font-size: 30rpx;
					color: #7677EB;
					text-align: center;
					line-height: 96rpx;
					box-sizing: border-box;
				}

				.in {
					width: 240rpx;
					height: 96rpx;
					background: #7677EB;
					box-shadow: 0rpx 12rpx 24rpx 0rpx rgba(63, 140, 255, 0.2637);
					border-radius: 28rpx;
					font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
					font-weight: 400;
					font-size: 30rpx;
					color: #FFFFFF;
					text-align: center;
					line-height: 96rpx;
				}
			}
		}

	}
</style>